<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读了么！-发货</title>
    <link href="style/setUs.css" rel="stylesheet" type="text/css">
    <link href="style/sendGoods.css" rel="stylesheet" type="text/css">
    <link href="layui/css/layui.css" rel="stylesheet" media="all">
    <script type="text/javascript" src="/js/First_Page.js"></script>
    <script src="layui/layui.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<header>
    <div class="head_d">
        <div class="leftH">
            <span id="dateTime"></span>
            <a>${sessionScope.shop.shopName}</a>
        </div>
        <div class="rightH">
            <li>${sessionScope.user.userName}</li>
            <button style="width: 80px;height: 20px;color: black" class="toLogin" onclick="login2exit()">退出登录</button>
        </div>
    </div>
</header>
<div class="gl">
    <span>读了么</span>卖家工作平台
</div>
<div class="manage">
    <div class="leftM">
        <div class="categoryFirst">
            <img src="image/c1.png">
            <span class="title">店铺管理</span>
            <ul class="list">
                <li><a href="shopIndex.jsp">我的店铺</a></li>
            </ul>
        </div>
        <hr/>
        <div class="category">
            <div>
                <img src="image/c2.png">
                <span class="title">交易管理</span></div>
            <ul class="list">
                <li>已卖出的商品</li>
                <li>评价管理</li>
            </ul>
        </div>
        <div class="category">
            <div class="list">
                <img src="image/c3.png">
                <span class="title">物流管理</span></div>
            <ul class="list">
                <li>发货</li>
                <li>物流工具</li>
            </ul>
        </div>
        <div class="category">
            <img src="image/c4.png">
            <span class="title">商品管理</span>
            <ul class="list">
                <li><a href="shopUpperShelf.html">发布书籍</a></li>
                <li><a href="shopSellBook.jsp">出售中的书籍</a></li>
            </ul>
        </div>
        <div class="categoryLast">
            <img src="image/c5.png">
            <span class="title">客户服务</span>
            <ul class="list">
                <li>退款管理</li>
                <li>违规记录</li>
            </ul>
        </div>
    </div>
    <div class="rightM">
        <div class="firstT"><span>我的店铺</span></div>
        <div class="lc-title"><span>订单发货状态：</span></div>
        <div class="sendG">
            <input type="button" value="未发货的订单" class="btn" id="active">
            <input type="button" value="已发货的订单" class="btn">
            <input type="button" value="已收货的订单" class="btn">
<!--            未发货的订单-->
            <div class="order" id="order1" style="display: block">
                <table id="unShipped" lay-filter="test"></table>
                <script type="text/html" id="barDemo1">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upp">发货</a>
                </script>
                <script>
                    //表格数据
                    layui.use('table', function () {
                        var table = layui.table;
                        table.render({
                            elem: '#unShipped',
                            height: 405,
                            page: true,
                            url: '/data/order/get?state=2',//获取数据的接口

                            cols: [[
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'orderId', title: '订单号', width: '120', sort: true, fixed: 'left'},
                                {field: 'name', title: '收货人姓名', width: '120'},
                                {field:'phoneNum',title:'收货电话',width:'120'},
                                {field: 'payTime', title: '下单时间', width: '120', sort: true},
                                {field: 'address', title: '配送地址', width: '220'},
                                {field: 'orderState', title: '订单状态', width: '100'},
                                {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo1'}
                            ]]
                        });
                        //发货
                        //批量发货正在做
                        table.on('tool(test)', function (obj) {
                            var data = obj.data;
                            var layEvent = obj.event; //获得 lay-event 对应的值
                            var tr = obj.tr;
                            if (layEvent === 'upp') {
                                layer.confirm('确认发货？', function (index) {
                                    var orderId=data.orderId;
                                    obj.del();
                                    $.ajax({
                                        url: '/data/order/set',//修改订单状态的接口
                                        type: 'GET',
                                        dataType: 'json',
                                        data: {'orderId':orderId,'orderState': 3},
                                        success: function (data) {
                                                if(data.result==1){
                                                    alert('发货成功！');
                                                    table.reload('Shipped',{url:'/data/order/get?state=3',where:{method:'order'}});

                                                }else {
                                                    alert('发货失败');
                                                }

                                        }
                                    });
                                    layer.close(index)
                                })
                            }
                        });
                    });
                </script>
            </div>
<!--            已经发货的订单-->
            <div class="order" id="order2">
                <table id="Shipped" lay-filter="text2"></table>
                <script>
                    //只显示数据，没有其他操作
                    layui.use('table', function () {
                        var table = layui.table;
                        table.render({
                            elem: '#Shipped',
                            height: 405,
                            page: true,
                            url: '/data/order/get?state=3',//接口
                            cols: [[
                                {type: 'checkbox', fixed: 'left'},{field: 'orderId', title: '订单号', width: '120', sort: true, fixed: 'left'},
                                {field: 'name', title: '收货人姓名', width: '120'},
                                {field:'phoneNum',title:'收货电话',width:'120'},
                                {field: 'payTime', title: '下单时间', width: '120', sort: true},
                                {field: 'address', title: '配送地址', width: '220'},
                                {field: 'orderState', title: '订单状态', width: '100'},
                            ]]
                        });
                    });
                </script>
            </div>
<!--            已收货的订单-->
            <div class="order" id="order3">
                <table id="received" lay-filter="text3"></table>
                <script type="text/html" id="barDemo3">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
                <script>
                    layui.use('table', function () {
                        var table = layui.table;
                        table.render({
                            elem: '#received',
                            height: 405,
                            page: true,
                            url: '/data/order/get?state=5',//接口
                            cols: [[
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'orderId', title: '订单号', width: '120', sort: true, fixed: 'left'},
                                {field: 'name', title: '收货人姓名', width: '120'},
                                {field:'phoneNum',title:'收货电话',width:'120'},
                                {field: 'payTime', title: '下单时间', width: '120', sort: true},
                                {field: 'address', title: '配送地址', width: '220'},
                                {field: 'orderState', title: '订单状态', width: '100'},
                                {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo3'}
                            ]]
                        });
                        //批量删除正在做
                        table.on('tool(test3)', function (obj) {
                            var data = obj.data; //获得当前行数据
                            var layEvent = obj.event; //获得 lay-event 对应的值
                            var tr = obj.tr;
                            if (layEvent === 'del') {
                                layer.confirm('确认删除？', function (index) {
                                    var orderId=$("#orderId").val();
                                    obj.del();
                                    $.ajax({
                                        type:'GET',
                                        url:'',
                                        dataType: 'json',
                                        data:{'orderId':orderId},
                                        success:function (data) {//可以做个判断
                                            alert("删除成功")
                                        }
                                    });
                                    layer.close(index)
                                })
                            }
                        });
                    });
                </script>
            </div>
            <script>
                window.onload = function () {
                    var aInput = document.getElementsByClassName("btn");
                    var aDiv = document.getElementsByClassName("order");
                    for (var i = 0; i < aInput.length; i++) {
                        aInput[i].index = i;
                        aInput[i].onclick = function () {
                            for (var j = 0; j < aInput.length; j++) {
                                aInput[j].idName = "";
                                aDiv[j].style.display = "none";
                            }
                            this.idName = "active";
                            aDiv[this.index].style.display = "block";
                        }
                    }
                }
            </script>
        </div>
    </div>
</div>
<script type="text/javascript" color="100,149,237" opacity='0.7' zIndex="-2" count="99" src="js/canvas-nest.js"></script>
</body>
</html>
